<template>
    <div class="container">
        <p class="oneP">金融保险行业面临的一些困境</p>
        <p class="twoP" style="font-weight:100">根据行业困境建立的营销模型，推广金融保险行业</p>
        <button class="oneButton" @click="$router.push({path:'/regist'})">立即注册</button>
        <ul class="ulOne">
            <li v-for="(item,index) in arr1" :key="index" :class="'item'+index">
                <div class="ulTwo" @mouseover="show(index)">
                    <img :src="item[0]">
                    <p>{{item[1]}}</p>
                    <p>{{item[2]}}</p>
                    <p>{{item[3]}}</p>
                </div>
                <div class="ulThree" v-if="redIndex==index">
                    <div><img :src="item[4]"></div>
                    <img src="../../assets/img/二类电商/免费咨询/circle.png">          
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/金融保险/金融行业的困境/1-1.png")
const img2 = require("../../assets/img/金融保险/金融行业的困境/3-3.png")
const img3 = require("../../assets/img/金融保险/金融行业的困境/5-5.png")
const img4 = require("../../assets/img/金融保险/金融行业的困境/4.png")
const img5 = require("../../assets/img/金融保险/金融行业的困境/2-2.png")
const img6 = require("../../assets/img/金融保险/金融行业的困境/4-4.png")
const img7 = require("../../assets/img/金融保险/金融行业的困境/6-6.png")
export default {
    data(){
        return {
            arr1:[
                [img1,"竞争激烈","缺乏公信力","",img5],
                [img2,"投资理财需求过大","且保持强势增长势头","",img6],
                [img3,"网贷平台数量剧增","广告费庞大","",img7],
            ],
            redIndex : 0,
        }
    },
    methods: {
        show(index) {
            this.redIndex = index
        },
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin:0 auto;
    text-align: center;
    margin-top: 80px;
    overflow: hidden;
}
.oneButton{
    width: 140px;
    box-shadow: 0px 4px 19px #ed9191;
}
.ulOne{
    overflow: hidden;
    margin-top: 60px;
    padding:7px;
}
.ulOne p{
    font-size: 16px;
}
.ulOne>li {
    /* 216*5 1080 120 */
  width: 370px;
  float: left;
  height: 320px;
  text-align: center;
  position: relative;
  margin-left: 30px;
  box-shadow: 2px 2px 16px #ebebeb;
}
.ulOne>li:first-child{
    margin-left: 0px;
}
.ulTwo {
  width: 100%;
  height:320px;
  text-align: center;
  background-size: cover;
}
.item0{
 background: url("../../assets/img/金融保险/金融行业的困境/5.png") center;
}
.item1{
    background: url("../../assets/img/金融保险/金融行业的困境/6.png") center;
}
.item2{
    background: url("../../assets/img/金融保险/金融行业的困境/7.png") center;
}

.ulTwo>img{
    margin-top: 60px;
}
.ulTwo>p:nth-child(2){
    margin-top: 60px;
}
.ulTwo>p:nth-child(3),.ulTwo>p:nth-child(4),.ulTwo>p:nth-child(5){
    margin-top: 10px;
}
.ulThree {
  width: 100%;
  height:320px;
  border:1px solid #ee4041;
  background-size: cover;
  position: absolute;
  top: -1px;
  left: 0;
  text-align: center;
}
.ulThree>div>img{
    margin-top: 60px;
}
.ulThree>img:nth-child(2){
    margin-top: 30px;
}
.ulThree>p:nth-child(3){
    margin-top: 25px;
} 
.ulThree>p:nth-child(4),.ulThree>p:nth-child(5),.ulThree>p:nth-child(6){
    margin-top: 10px;
}
</style>